<template>
  <el-container>
<!--    左边-->
    <el-aside width="200px">
      <img src="../assets/loginBox.svg">
      <p class="imgTitle">欢迎使用动力云客系统</p>
    </el-aside>
<!--    右边-->
    <el-main>
      <el-form ref="loginRefForm" :model="user" label-width="120px" :rules="loginRules">
        <div class="loginTitle">欢迎登录</div>

        <el-form-item label="账号" prop="loginAct">
          <el-input v-model="user.loginAct" />
        </el-form-item>

        <el-form-item label="密码" prop="loginPwd">
          <el-input type="password" v-model="user.loginPwd" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="login">登 录</el-button>
        </el-form-item>

        <el-form-item>
          <el-checkbox label="记住我" v-model="user.remeberMe" />
        </el-form-item>

      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import {doGet, doPost} from "../http/httpRequest.js";
import {getTokenName, messageTip, removeToken} from "../util/util.js";

export default {
  name: "LoginView",
  //定义页面使用的变量
  data(){
    return {
      //对象变量定义
      user:{
        loginAct:'',
        loginPwd:'',
        remeberMe:'',
      },
      //定义登录表单的验证规则
      loginRules: {
        //定义账号的验证规则，规则可以有多个，所以是数组
        loginAct: [
          { required: true, message: '请输入账号', trigger: 'blur' },
        ],
        //定义密码的验证规则，规则可以有多个，所以是数组
        loginPwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 4, max: 8, message: '密码长度为4-8位', trigger: 'blur' },
        ],
      },
    }
  },

  //定义钩子函数
  mounted(){
    //免登录
    this.loginFree();
  },

  //页面上需要使用功能的js函数，都在methods属性中定义
  methods:{
    //登录函数
    login(){
      //提交前验证输入框的合法性
      this.$refs.loginRefForm.validate((isValid) => {
        //isValid是验证后的结果，如果是true表示验证通过，否则表示验证失败
        if(isValid) {
          //验证通过，可以提交登录
          //只能使用这种格式传递数据，才能接收到
          let formData = new FormData();
          formData.append("loginAct",this.user.loginAct);
          formData.append("loginPwd",this.user.loginPwd);
          formData.append("remeberMe",this.user.remeberMe);
          doPost("/api/login",formData).then(resp => {
            if(resp.data.code === 200) {
              //登录成功
              messageTip("登录成功","success");
              //删除历史存储的jwt
              removeToken();
              //前端保存jwt，如果选择“记住我”，保存到localStorage，否则保存到sessionStorage
              if(this.user.remeberMe){
                localStorage.setItem(getTokenName(),resp.data.data);
              }else {
                sessionStorage.setItem(getTokenName(),resp.data.data);
              }
              //跳转到首页
              window.location.href="/dashboard";
            }else {
              //登录失败
              messageTip("登录失败","error");
            }
          });

        }
      })
    },

    //免登录函数
    loginFree(){
      //获取token
      let token = window.localStorage.getItem(getTokenName());
      //token存在表示可以实现免登录
      if (token) {
        doGet("/api/login/free",{}).then(resp =>{
          if(resp.data.code === 200) {
            //表示token验证成功
            window.location.href="/dashboard";
          }
        })
      }
    },
  },
}
</script>

<style scoped>
.el-aside {
  background: #1a1a1a;
  width:40%;
  text-align: center;
}
.el-main {
  height:calc(100vh);
}
img {
  height:413px ;
}
.imgTitle{
  color:#f9f9f9;
  font-size:22px;
}
.el-form{
  width:60%;
  margin:auto
}
.loginTitle {
  text-align: center;
  margin-top:100px;
  margin-bottom:25px;
  font-weight: bold;
}
.el-button {
  width: 100%;
}
</style>
